<div class="clue" style="color: red; padding: 0px 0px 10px 0px;">
    【操作提示】修改完成后，请点击“保存列表”按钮。<br/>
    【操作提示】一个银行只允许录入一条数据。
</div>

<!--列表-->
<table class="am-table am-table-bordered am-table-radius am-table-striped">
    <thead>
        <tr>
            <th>排序</th>
            <th width="120px">银行名称</th>
            <th width="120px">开户名</th>
            <th>银行账号</th>
            <th width="130px">支付地址</th>
            <th>状态</th>
            <th>用户组</th>
            <th>入款限额</th>
            <th width="80px">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<style type="text/css">
    .am-table td {
        padding: 5px 15px 5px 15px;
    }
</style>

<div class="button_line">
    <button class="am-btn am-btn-primary btn-add admin_button">新增</button>
    <button class="am-btn am-btn-primary btn-save admin_button">保存列表</button>
</div>

<script>
    Util.applyRights({
        "/client/charge_save": "button_line",
    });
    
    // 生成银行列表
    function genBankList() {
        var td = $("<td></td>");
        var s = $("<select data-am-selected class='bank'></select>");
        var arr = Util.banks;
        for (var i in arr) {
            s.append('<option value="' + arr[i].name + '">' + arr[i].name + '</option>');
        }
        td.append(s);
        return td;
    }

    // 用户组复选框
    function genGroups(roles) {
        var td = $("<td class='groups'></td>");
        for (var i in layers) {
            var line = '<label class="am-checkbox"><input type="checkbox" value="__v__" data-am-ucheck __c__> __t__</label>';
            line = line.replace(/__v__/, layers[i].level);
            line = line.replace(/__t__/, layers[i].name);
            if (roles.indexOf(layers[i].level + "") == -1) line = line.replace(/__c__/, '');
            else line = line.replace(/__c__/, 'checked');
            td.append(line);
        }
        return td;
    }

    var banks = [], layers = [];
    Layer.query(undefined, function(r) {
        layers = Layer.sort(r);
        Classify.queryExt("money", "banks", true, [], function(r) {
            banks = r;
            fillBanks();
        });
    });

    function fillBanks() {
        var table = $(".am-table tbody");
        table.empty();
        banks.sort(function(a, b) {
            return (b.sort || 0) - (a.sort || 0);
        });
        for (var i in banks) {
            var tr = $("<tr></tr>");
            tr.append('<td class="center"><input type="text" class="empty_input sort" value="0"></td>');
            tr.append(genBankList());
            tr.append('<td><input type="text" class="empty_input name" placeholder="输入真实姓名"/></td>');
            tr.append('<td><input type="text" class="empty_input account" placeholder="输入银行账号"/></td>');
            tr.append('<td><input type="text" class="empty_input addr" placeholder="输入开户银行地址"/></td>');
            tr.append('<td><label class="am-checkbox"><input type="checkbox" class="enable" value="" data-am-ucheck> 启用</label></td>');
            tr.append(genGroups(banks[i].layer || []));
            tr.append('<td>' +
                '<input type="number" class="min" placeholder="输入最低入账金额" value="' + (banks[i].min || '') + '"/><br>' +
                '<input type="number" class="max" placeholder="输入最高入账金额" value="' + (banks[i].max || '') + '"/>' +
                '</td>');
            tr.append('<td><a href="#" value="' + i + '">删除</a></td>');
            table.append(tr);
        }

        var sorts = $(".am-table input.sort");
        var blist = $("select.bank");
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var addrs = $(".am-table input.addr");
        var enables = $("input.enable");
        for (var i in banks) {
            $(sorts[i]).val(banks[i].sort || 0);
            $(names[i]).val(banks[i].name);
            $(accounts[i]).val(banks[i].account);
            $(addrs[i]).val(banks[i].addr);

            $(blist[i]).val(banks[i].bank);
            $(blist[i]).trigger('changed.selected.amui');

            if (banks[i].enable == 1) $(enables[i]).uCheck('check');
            else $(enables[i]).uCheck('uncheck');
        }

        $(".am-table a").click(function(e) {
            var i = $(e.currentTarget).attr("value");
            banks.splice(i, 1);
            fillBanks();
        });
        $("select").selected();
        $("input[type='checkbox']").uCheck();
    }

    $(".btn-add").click(function() {
        banks.push({
            bank: "中国工商银行",
            account: "",
            name: "",
            enable: 1,
            layer: ["0"],
            min: 100,
            max: 9999999,
        });
        fillBanks();
    });

    $(".btn-save").click(function() {
        // 回写数据
        var sorts = $(".am-table input.sort");
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var enables = $("input.enable");
        var blist = $("select.bank");
        var layerSelects = $("select.layer");
        var addrs = $(".am-table input.addr");
        var groups = $(".am-table .groups");
        var mins = $(".am-table input.min");
        var maxs = $(".am-table input.max");
        for (var i in banks) {
            banks[i].sort = $(sorts[i]).val() || 0;
            banks[i].name = $(names[i]).val();
            banks[i].account = $(accounts[i]).val();
            banks[i].addr = $(addrs[i]).val();
            banks[i].bank = $(blist[i]).val();
            banks[i].min = parseInt($(mins[i]).val());
            banks[i].max = parseInt($(maxs[i]).val());
            if (enables[i].checked) banks[i].enable = 1;
            else banks[i].enable = 0;

            banks[i].layer = [];
            var arr2 = $(groups[i]).find("input[type='checkbox']:checked");
            for (var j = 0; j < arr2.length; j++) {
                banks[i].layer.push($(arr2[j]).val());
            }
        }

        startLoading();
        Classify.saveExt("money", "banks", banks, function() {
            stopLoading();
            alert2("保存成功！");
        });
    });
</script>
